<template>
  <el-container>
    <el-header>
      <div style="margin-top: 10px">
        <el-row class="demo-autocomplete">
          <el-col :span="6">
            <el-input
              v-model="search"
              size="small"
              placeholder="输入关键字根据邮件主题模糊搜索"
              @change="detect(tableDataStorage)"
              suffix-icon="el-icon-date"
            />
          </el-col>
          <el-col :span="3">
            <el-button type="danger" size="small" @click="deleteAllDialog = true">清空索引库</el-button>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="senderDate" label="发信日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="subject" label="邮件主题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="senderName" label="发件人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="senderAddress" label="发件人地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="recipientAddressList" label="收件人地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachmentType" label="附件类型" show-overflow-tooltip></el-table-column>
        <el-table-column
          prop="attachmentLocation"
          label="附件服务器地址"
          show-overflow-tooltip
          width="150"
        ></el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: -40px;float:left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
    </el-footer>
    <el-dialog title="清空索引库已解析的邮件" :visible.sync="deleteAllDialog">
      <span>--再次确认您的操作：清空索引库已解析的邮件？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteAllDialog = false">取 消</el-button>
        <el-button type="primary" @click="deleteAllDialog = false;deleteAllIndexs()">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      tableDataStorage: [], //tableDataStorage保存tableData一样的数据
      multipleSelection: [],
      //分页
      currentPage: 1, //初始页
      pagesize: 10, //    初始每页的数据
      //模糊搜索
      search: "",
      deleteAllDialog: false
    };
  },
  created() {
    this.getInit();
  },
computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    async getInit() {
      axios
        .get("/api/EmlRepositoryController/emailsIndex",{
           headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let list = response.data.data.content;
          console.log(list);
          this.tableData = list;
          this.tableDataStorage = list;
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
    },

    //分页
    // 初始每页数据数pagesize
    handleSizeChange(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    //初始页currentPage
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    //模糊搜索

    detect(val) {
      let temp = [];
      let self = this;
      temp = JSON.parse(JSON.stringify(val));
      let subject = this.search;
      let count = 0;
      for (let i = 0; i < temp.length; i++) {
        // if (!(temp[i].name === emlName)) {
        //split对字符串分割后返回的是数组，所以如果没有被关键字分割那么返回值的长度就是1
        if (temp[i].subject.split(subject).length == 1) {
          console.log(temp[i].name);
          temp.splice(i, 1); //这种删除方式会自动更新长度，慎用
          i--;
          count++;
          console.log("删除");
        }
      }

      console.log(count);
      self.tableData = temp;
    },
    deleteAllIndexs() {
      console.log("...");
      axios
        .get("/api/EmlRepositoryController/deleteIndexEmls",{
           headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let code = response.data.code;
          if (code==200) {
            this.$message({
              showClose: true,
              message: "恭喜你，索引库邮件全部清空了",
              type: "success"
            });
          }
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
    }
  }
};
</script>

<style scoped>
.el-footer {
  height: 40px;
  width: 100%;
  background-color: #ddd;
  position: fixed;
  bottom: 0;
}
</style>




